<template>
  <!-- 入库记录 -->
  <div>
    <div class="topSearch">
      <el-form class="searcView" :model="searchModel">
        <el-input
          v-model="searchModel.scanStr"
          placeholder="商品名称"
          style="width: 183px; margin-right: 10px"
        ></el-input>

        <el-select
          v-model="searchModel.checkCategory"
          placeholder="选择类目"
          style="width: 183px; margin-right: 20px"
        >
          <el-option label="百货食品" value="baihuo"></el-option>
          <el-option label="服装鞋包" value="fuzhuabg"></el-option>
          <el-option label="美妆饰品" value="meizhuabg"></el-option>
        </el-select>

        <el-input
          v-model="searchModel.rukuTime"
          placeholder="入库开始日期"
          style="width: 183px"
        ></el-input>

        <el-input
          v-model="searchModel.deadline"
          placeholder="入库截至日期"
          style="width: 183px; margin-left: 10px"
        ></el-input>

        <el-button
          size="small"
          class="searchBtn"
          @click="searchClick"
          style="width: 80px; margin-left: 10px"
          >查询</el-button
        >
        <el-button
          size="small"
          class="resetBtn"
          @click="resettingClick"
          style="width: 80px; margin-left: 10px"
          >重置</el-button
        >
        <el-button size="small" class="searchBtn" @click="exportClick"
          >导出EXCEl</el-button
        >
      </el-form>
    </div>

    <el-table
      id="table"
      class="tableView"
      :data="tabaData"
      stripe
      border
      max-height="700px"
      style="width: 100%"
    >
      <el-table-column
        prop="rukuNum"
        label="入库单号"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="rukuTime"
        label="入库时间"
        align="center"
      ></el-table-column>

      <el-table-column prop="img" label="商品图片">
        <template slot-scope="scope">
          <!-- <el-image :src="imge"></el-image> -->
          <img
            src="https://bpic.588ku.com/art_water_pic/19/04/08/631da2190bd33a3e89ab4d9f4822433f.jpg"
            alt=""
            width="100px"
            height="100px"
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="name"
        label="商品名称"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="category"
        label="所属类目"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="displayPrice"
        label="前端显示价格"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="settlePrice"
        label="结算价"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="rukuCount"
        label="入库数量"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="operator"
        label="操作员"
        align="center"
      ></el-table-column>

      <el-table-column fixed="right" label="操作" width="210" align="center">
        <template v-slot="scope">
          <el-button @click="detailClick(scope.row)" type="danger" size="mini"
            >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px auto; width: 600px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next,total,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        :total="100"
      >
      </el-pagination>
    </div>

    <!-- 详情弹框 -->
    <el-dialog
      width="50%"
      title="入库详情"
      :visible.sync="detaliDialogClick"
      left
    >
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>
      <el-form
        class="rowlayout"
        :model="rukuDetailFormModel"
        :label-width="dialogformLabelWidth"
      >
        <el-form-item label="入库单号:">
          <el-input
            v-model="rukuDetailFormModel.oddNum"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品信息:">
          <el-image :src="rukuDetailFormModel.img"> </el-image>
        </el-form-item>

        <el-form-item label="商品名称:">
          <el-input
            v-model="rukuDetailFormModel.name"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品所属类目:">
          <el-input
            v-model="rukuDetailFormModel.category"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="前端显示价格:">
          <el-input
            v-model="rukuDetailFormModel.displayPrice"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="结算价格:">
          <el-input
            v-model="rukuDetailFormModel.settlePrice"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="操作员:">
          <el-input
            v-model="rukuDetailFormModel.operator"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="入库时间:">
          <el-input
            v-model="rukuDetailFormModel.rukuTime"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="*入库数量:" color:red>
          <el-input
            v-model="rukushuliang"
            placeholder="请输入规格值"
            style="width: 320px"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注:">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="textarea"
            style="width: 320px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" align="center">
        <el-button
          type="primary"
          @click="confirmRukuDialogClick"
          style="background: rgb(41, 59, 105); color: white"
          >确认入库</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import exportExecl from "@/utils/exportExecl.js";
export default {
  name: "inboundRecord",
  data() {
    return {
      searchModel: {
        scanStr: "", //搜索商品名称
        checkCategory: "", //选择类目
        rukuTime: "", //入库时间
        deadline: "", //截至时间
      },
      //入库详情model
      rukuDetailFormModel: {
        oddNum: "3665599855663322",
        img: "https://bpic.588ku.com/art_water_pic/19/04/08/631da2190bd33a3e89ab4d9f4822433f.jpg", //商品图片
        name: "ENC糖果", //商品名称
        displayPrice: 1555, //前端显示价格
        category: "服装>裤子>牛仔裤", //商品所属类目
        settlePrice: 888, //结算价格
        operator: 8888, //操作员
        rukuTime: 666, //入库时间
      },
      detaliDialogClick: false,
      rukushuliang: "555", //入库数量
      textarea: "备注",
      tabaData: [
        {
          rukuNum: "20332112321", //入库单号
          rukuTime: "2023-11-11-01：23", //入库时间
          img: "https://bpic.588ku.com/art_water_pic/19/04/08/631da2190bd33a3e89ab4d9f4822433f.jpg",
          name: "超级破烂牛仔裤",
          category: "服装>裤子>牛仔裤",
          displayPrice: "1800", //前端显示价格
          settlePrice: "800", //结算价格
          rukuCount: "120312", //入库数量
          operator: "3232", //操作员
        },
        {
          rukuNum: "20332112321", //入库单号
          rukuTime: "2023-11-11-01：23", //入库时间
          img: "https://bpic.588ku.com/art_water_pic/19/04/08/631da2190bd33a3e89ab4d9f4822433f.jpg",
          name: "超级破烂牛仔裤",
          category: "服装>裤子>牛仔裤",
          displayPrice: "1800", //前端显示价格
          settlePrice: "800", //结算价格
          rukuCount: "120312", //入库数量
          operator: "3232", //操作员
        },
      ],
      formLabelWidth: "120px",
      dialogformLabelWidth: "120px",
    };
  },
  computed: {},

  methods: {
    //查询
    searchClick() {
      console.log("查询");
    },
    resettingClick() {
      console.log("重置");
    },
    //导出Excel
    exportClick() {
      console.log("导出Excel");
      exportExecl("table", "模板.xlsx");
    },
    //详情
    detailClick(row) {
      // console.log("第", row, "行");
      console.log(row);
      this.detaliDialogClick = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //dialog确认入库
    confirmRukuDialogClick() {
      console.log("确认入库");
    },
  },
};
</script>

<style scoped>
.topSearch {
  border: 1px solid rgb(228, 228, 288);
  background-color: white;
  width: 98%;
  height: 45px;
  padding: 20px;
}
.searcView
/* display: flex 默认水平排列 */ {
  display: flex;
}

.searchBtn {
  margin-left: 50px;
  width: 80px;
  height: 30px;
  color: white;
  background-color: rgb(41, 59, 105);
}
.resetBtn {
  background-color: #4462aa;
  color: white;
}

.tableView {
  margin-top: 20px;
}

.el-input {
  width: 320px;
}
.el-input.is-disabled {
  width: 320px;
}
.el-input.is-disabled /deep/ .el-input__inner {
  color: #333;
}
/* 默认不可操作情况 修改边框生效 */
/* .el-input.is-disabled{
  background:#dbdada;
  border: 1px solid #868686;
} */
.el-image {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
</style>
